<template>
<div>

  <el-row>
    <el-col :span="1"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="22">
      <div class="grid-content bg-purple-light" style="margin-bottom: 300px">
        <div class="c_title" style="margin-top: 20px">

            <div style="margin-right: 15px">
              <img :src="warnImg" alt="">
            </div>
           <p>
            维数金融将根据您填写的信息进行初步审核，您填写的信息资料越真实详尽，您申请融资的审批通过率越高。同时，我们有严格的用户信息操作规范.
            <br>
            <span style="color: red">确保您的隐私不被泄露，请勿填写虚假信息。</span>
          </p>
        </div>
        <br><br>
        <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="150px">

          <el-form-item label="金融产品选择" prop="jrProductId">
            <el-select v-model="form.jrProductId" placeholder="请选择" @change="chooseProduct" clearable>
              <el-option
                v-for="(value,key) in factoringApplyMap"
                :key="key"
                :label="value.jrProductName"
                :value="key">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="授信额度" prop="creditLine" style="margin-left: 50px">
            <el-input v-model="form.creditLine" disabled>
              <template slot="append">%</template>
            </el-input>
          </el-form-item>

          <br><br>
          <el-form-item label="年一次性服务费率" prop="serviceFee">
            <el-input v-model="form.serviceFee" >
              <template slot="append">%</template>
            </el-input>
          </el-form-item>

          <el-form-item label="年利率" prop="interestRate">
            <el-input v-model="form.interestRate" >
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
          <br>

          <div style="margin-left: 30px">
            <el-button type="warning" size="small" @click="toAddContract">添加租房合同</el-button>
          </div>
        </el-form>
        <br><br>

        <el-table :data="factoringDetails">
          <el-table-column label="序号" align="center" >
            <template slot-scope="scope">
              {{scope.$index + 1}}
            </template>
          </el-table-column>

          <el-table-column label="房产信息" align="center" prop="roomName" />
          <el-table-column label="房源编号" align="center" prop="roomCode" />
          <el-table-column label="租客姓名" align="center" prop="tenantName" />
          <el-table-column label="租客手机号" align="center" prop="tenantPhone" />

          <el-table-column label="应收租约金额" align="center" prop="shouldMonthRent" >
            <template slot-scope="scope">{{scope.row.shouldMonthRent}}元</template>
          </el-table-column>

          <el-table-column label="保理授信额度" align="center" prop="factoringCreditMoney" >
            <template slot-scope="scope">{{scope.row.factoringCreditMoney}}元</template>
          </el-table-column>

          <el-table-column label="保理利息" align="center" prop="factoringInterest" >
            <template slot-scope="scope">{{scope.row.factoringInterest}}元</template>
          </el-table-column>

          <el-table-column label="借款期限" align="center" prop="factoringPeriod" >
            <template slot-scope="scope">
              {{scope.row.factoringPeriod}}个月<br>
              {{scope.row.borrowedStart}}&nbsp;至&nbsp;{{scope.row.borrowedEnd}}
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" >
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" circle @click="delFactoringDetail(scope.row)"></el-button>
            </template>
          </el-table-column>

        </el-table>
        <br>

        <el-form :inline="true" :model="showForm" class="demo-form-inline" label-width="170px" >

          <el-form-item label="应收租约合计">
            <el-input v-model="showForm.shouldMonthRent" disabled></el-input>
          </el-form-item>

          <el-form-item label="保理授信金额合计">
            <el-input v-model="showForm.factoringCreditMoney" disabled></el-input>
          </el-form-item>
          <br>

          <el-form-item label="服务费">
            <el-input v-model="showForm.serviceFee" disabled></el-input>
          </el-form-item>

          <el-form-item label="保理利息合计">
            <el-input v-model="showForm.factoringInterest" disabled></el-input>
          </el-form-item>
          <br>

          <el-form-item label="实收保理金额">
            <el-input v-model="showForm.factoringTrueMoney" disabled></el-input>
          </el-form-item>
          <br>

          <el-form-item label="备注">
            <el-input
              type="textarea"
              v-model="form.remark" :cols="50" :rows="6"></el-input>
          </el-form-item>
          <br>
          <div style="margin-left: 150px">
            <el-button type="warning" @click="saveFactoring">提交申请</el-button>
          </div>
        </el-form>


      </div>
    </el-col>
  </el-row>

  <el-dialog title="租房合同查询" :visible.sync="open" width="800px" append-to-body>

    <el-form :inline="true" :model="contractVO" class="demo-form-inline">

      <el-form-item label="小区名称">
        <el-input v-model="contractVO.premiseName" placeholder="小区名称"></el-input>
      </el-form-item>

      <el-form-item label="租客姓名">
        <el-input v-model="contractVO.tenantName" placeholder="租客姓名"></el-input>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" size="small" @click="getListFactoringContract">搜索</el-button>
    </el-form>
    <el-table v-loading="loading" :data="contractList">

      <el-table-column label="租客姓名" align="center" prop="tenantName" />
      <el-table-column label="房源信息" align="center" prop="roomName" />
      <el-table-column label="签约日期" align="center" prop="signingDate" />
      <el-table-column label="操作" align="center" >

        <template slot-scope="scope">
          <el-link type="warning" @click="chooseContract(scope.row.id + '')">选中</el-link>
        </template>
      </el-table-column>

    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="contractVO.pageNum"
      :limit.sync="contractVO.pageSize"
      @pagination="getListFactoringContract"
    />

  </el-dialog>




</div>
</template>

<script>
import {
  getFactoringApplyMap,
  getFactoring,
  delFactoring,
  addFactoring,
  updateFactoring,
  listFactoringContract, chooseContract, save
} from "@/api/finance/factoring";

  export default {
    name: "Factoring",
    data (){

      var verifyRate = (rule, value, callback) => {

        let regexp = /(^(\d|[1-9]\d)(\.\d{1,2})?$)|(^100$)/;

        if (!regexp.test(value) || value <= 0) {
          callback(new Error('请输入0~100之间的整数或小数(不包含0并且小数点后最多两位)'));
        } else {
          callback();
        }
      };
      return {
        warnImg: "http://localhost:8081/upload/c_tip.png",
        factoringApplyMap: {},
        open: false,
        loading: false,
        contractList: [],
        factoringDetails: [],
        total: 0,
        contractVO: {
          pageNum: 1,
          pageSize: 10,
          premiseName: null,
          tenantName: null,
        },
        // 表单参数
        form: {

          jrProductId: null,
          contractId: null,
          serviceFee: null,
          interestRate: null,
          creditLine: null,
          remark: null,
        },
        // 展示合计
        showForm: {
          shouldMonthRent: null,
          factoringCreditMoney: null,
          serviceFee: null,
          factoringInterest: null,
          factoringTrueMoney: null
        },
        contractIds: [],
        // 表单校验
        rules: {
          jrProductId: [
            { required: true, message: "请选择金融产品", trigger: "change" }
          ],
          creditLine: [
            { required: true, message: "请选择金融产品获取授信额度", trigger: "change" }
          ],
          serviceFee: [
            { required: true, message: "请输入年一次性服务费率", trigger: "blur" },
            { validator: verifyRate, trigger: 'blur' }
          ],
          interestRate: [
            { required: true, message: "请输入年利率", trigger: "blur" },
            { validator: verifyRate, trigger: 'blur' }
          ],
        }
      }
    },
    methods: {

      getProjectMap(){

        getFactoringApplyMap().then(response => {

          this.factoringApplyMap = response.data;
        });
      },
      chooseProduct(id){

        if (id){

          this.form.creditLine = this.factoringApplyMap[id].creditLine;
        } else {
          this.form.creditLine = null;
        }
      },
      toAddContract(){

        this.$refs["form"].validate(valid => {
          if (valid) {
            this.open = true;
            this.getListFactoringContract();
          }
        });
      },
      getListFactoringContract(){
        this.loading = true;
        listFactoringContract(this.contractVO).then(response => {
          this.contractList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 选择合同
      chooseContract(id){

        if (this.contractIds && this.contractIds.indexOf(id) !== -1){

          this.$message.error("不要重复选择！");
          return;
        }
        this.form.contractId = id;
        chooseContract(this.form).then(response => {

          if (response.code === 200){

            this.contractIds.push(id);
            let data = response.data;
            data.shouldMonthRent = Number(data.shouldMonthRent).toFixed(2);
            data.factoringCreditMoney = Number(data.factoringCreditMoney).toFixed(2);
            data.factoringInterest = Number(data.factoringInterest).toFixed(2);

            this.factoringDetails.push(response.data);
            this.open = false;

            // 计算
            this.compute();
          }
        });
      },
      compute(){

        if (this.factoringDetails.length === 0){

          this.showForm.shouldMonthRent = null;
          this.showForm.factoringCreditMoney = null;
          this.showForm.serviceFee = null;
          this.showForm.factoringInterest = null;
          this.showForm.factoringTrueMoney = null;
          return;
        }

        let shouldMonthRent = 0;
        let factoringCreditMoney = 0;
        let serviceFee = 0;
        let factoringInterest = 0;

        this.factoringDetails.forEach(s => {

          shouldMonthRent += Number(s.shouldMonthRent);
          factoringCreditMoney += Number(s.factoringCreditMoney);
          serviceFee += Number(s.serviceFee);
          factoringInterest += Number(s.factoringInterest);
        });
        this.showForm.shouldMonthRent = shouldMonthRent.toFixed(2) + "元";
        this.showForm.factoringCreditMoney = factoringCreditMoney.toFixed(2) + "元";
        this.showForm.serviceFee = serviceFee.toFixed(2) + "元";
        this.showForm.factoringInterest = factoringInterest.toFixed(2) + "元";
        this.showForm.factoringTrueMoney = (factoringCreditMoney - serviceFee - factoringInterest).toFixed(2) + "元";
      },
      delFactoringDetail(row){

        this.factoringDetails.splice(row,1);
        this.compute();
      },
      saveFactoring(){

        this.$refs["form"].validate(valid => {
          if (valid) {

            let saveForm = {

              jrProductId: this.form.jrProductId,// 金融产品ID
              serviceFee: this.form.serviceFee,// 一次性服务费
              rate: this.form.interestRate,// 年利率
              rentMoney:this.showForm.shouldMonthRent.replace("元",""),
              factoringCreditMoney: this.showForm.factoringCreditMoney.replace("元",""),
              serviceMoney: this.showForm.serviceFee.replace("元",""),
              factoringAdditionalMoney: this.showForm.factoringInterest.replace("元",""),
              factoringTrueMoney: this.showForm.factoringTrueMoney.replace("元",""),
              remark: this.form.remark,
              detailList: this.detailList,
            };

            save(saveForm).then(response => {

              this.$message.success(response.msg);
            });
          }
        });
      }
    },
    created() {

      this.getProjectMap();
    }
  }
</script>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.c_title{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  background: #fcf0c6;
  padding: 20px 0px;
  line-height: 20px;
  font-weight: bold;
}
</style>
